

.ana-content {

  background-image: url(../../image/analysis/bg.png);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .setting .config-title{
    display: none !important;
  }

  .arrow-back {
    width: 12px;
    height: auto;
    float: left;
    margin-left: 15px;
    margin-top: 32px;
  }
  .analysis-title {
    width: 100%;
    height: 64px;

    background-size: 100%;
    top: 0;
    .text {
      font-size: 12px;
      color: #FFFFFF;
      display: block;
      text-align: center;
      padding-top: 35px;
    }
  }
  .shiubeng-bg {
    .open-config {
      position: absolute;
      top: 5%;
      right: 5%;
      color: white;
      font-size: 14px;
    }
     .water-tower {
       width: 80%;
       margin-left: 12.7%;
       height: 45.3vh;
       position: absolute;
       top: 12.7%;
     }
    .water-bg {
      width: 7.2%;
      height: 32.7%;
      position: absolute;
      bottom: 42.1%;
      left: 22%;
      overflow: hidden;
      .water {
        width: 500%;
        height: 100%;
        position: relative;
        left: -400%;
        animation: horizontal 3s linear;

        animation-iteration-count: infinite;
      }
      @keyframes horizontal
      {
        0% {
          left: -400%;
        }
        50% {
          left: -200%;
        }
        100% {
          left: 0
        }
      }
    }
  }

  .analysis-tabs {
    position: absolute;
    bottom: 3%;
    text-align: center;
    width: 100%;
      .analysis-tab {

        margin: 1%;
        width: 28.5vw;
        height: 25.4vw;
        padding-bottom: 2.5%;
        background-size: 100% 100%;
        display: inline-block;
        vertical-align: bottom;
        .data-display {
          padding: 0 10px;
          width: 55%;
          height: 16%;
          display: block;
          margin: 8.7% auto 0;
          background: rgba(7,103,179,0.5);
          border: 1px solid #0078d5;
          -webkit-border-radius: 3px;
          -moz-border-radius: 3px;
          border-radius: 3px;
          color: #FFFFFF;
          font-size: 12px;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
    }
      .analysis-tab:first-child, .analysis-tab:nth-child(4) {
        margin-left: 0;
      }
    .analysis-tab:last-child, .analysis-tab:nth-child(3) {
      margin-right: 0;
    }
  }

  // 输入控制板
  .configPanel {
    .config {
      background: #FFFFFF;
      width: 92%;
      height: 84%;
      position: absolute;
      top: -8%;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      z-index: 1;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      overflow: scroll;
      .close {
        display: block;
        width: 18px;
        height: auto;
        position: fixed;
        top: 35px;
        right: 25px;
      }
      .config-unit {
        font-size: 13px;
        padding: 0 5%;
        box-sizing: border-box;
        margin-top: 35px;
        margin-bottom: 15px;
        list-style: none;
        .config-formula {
          display: block;
          padding-left: 0;
          text-align: left;
          font-size: 12px;
          color: #eb6100;
          margin-top: 20px;
          p {
            margin: 10px 10px 10px 0;
          }
        }
        .config-title {
          margin-top: 15px;
          font-size: 18px;
          border-bottom: 2px solid #eb6100;
          padding-bottom: 6px;
          box-sizing: border-box;
          margin-bottom: 20px;
          text-align: center;
          .config-label {
            font-size: 18px;
          }
        }
        .config-control {
          display: block;
          vertical-align: middle;
          .math-params {
            text-align: left;
            margin-bottom: 5%;
            .cal-btn {
              background: #eb6100;
              color: white;
              font-size: 18px;
              width: 80%;
              height: 42px;
              line-height: 42px;
              text-align: center;
              margin: 20px auto;
              -webkit-border-radius: 5px;
              -moz-border-radius: 5px;
              border-radius: 5px;
            }
            .unit-select {
              margin: 10px 0;
              label:first-child {
                margin-right: 10px;
              }
            }
            .result {
              display: block;
              margin-left: 0;
            }
            .input-field-option {
              font-size: 13px;
              box-sizing: border-box;
              margin-bottom: 5px;
              display: flex;
              .title {
                margin-top: 15px;
                font-size: 18px;
                border-bottom: 2px solid #eb6100;
                padding-bottom: 6px;
                box-sizing: border-box;
                margin-bottom: 20px;
                text-align: center;
              }
              .input-div {
                //display: inline-block;
                height: 20px;
                width: 29%;
                //position: relative;
                .clear-icon {
                  display: inline-block;
                  width: 16px;
                  height: 16px;
                  right: 16px;
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                }
              }
              .input-value {
                border: none;
                outline: none;
                line-height: 20px;
                font-size: 13px;
                background: #fff !important;
              }
              .input-value::-webkit-input-placeholder{
                color: #c5c8ce;
                font-size: 13px;
              }
            }
            .input-field-option:first-child {
              margin-top: 0;
            }
            .isOpen {
              height: auto;
            }
          }
          .output-option {
            margin-bottom: 5px;
            display: flex;
            .input-div {
              //display: inline-block;
              height: 20px;
              width: 25%;
              //position: relative;
              .clear-icon {
                display: inline-block;
                width: 16px;
                height: 16px;
                right: 16px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
              }
            }
          }
        }
      }
      .btn-div {
        text-align: center;
        .confirm {
          display: inline-block;
          background: #eb6100;
          // background: #034eab;#eb6100
          color: white;
          font-size: 18px;
          width: 80%;
          height: 42px;
          line-height: 42px;
          text-align: center;
          margin: 10px auto 25px auto;
          padding: 0;
          border: none;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
        }
      }
    }
  }
}

.shrink {
  height: 30px;
  overflow: hidden;
}

@media (max-height:630px) {
  .ana-content {
    .analysis-tabs {
      transform: scale(0.75);
      bottom: 1%;
      .analysis-tab {
        margin: 2.4% 3.3%;
      }
    }
  }

}
